<script setup>
import {inject, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {doDelete, doGet, doPost} from "@/util/request.js";
import {
  Avatar, Calendar, ChatLineSquare, ChatRound, Cherry, Coordinate, Edit, EditPen, GoodsFilled, InfoFilled,
  Iphone, Loading, Message, PieChart, Place, Promotion, ShoppingCartFull, Star, Stopwatch, Timer, User,
  Wallet, WalletFilled
} from "@element-plus/icons-vue";
import {showMessage} from "@/util/message.js";
import {ElMessageBox} from "element-plus";

//刷新页面
const refresh = inject('refresh')
//路由对象
const route = useRoute()
const router = useRouter()
//对话框打开
const dialogVisible = ref(true)
//详情数据对象
const customerDetail = ref({})
//查询详情数据
const loadClueDetail = () => {
  //获取路由参数
  let id = route.params.id
  //发送请求获取详情数据
  doGet('/api/customer/detail/' + id, {}).then(resp => {
    console.log(resp.data.data)
    if (resp.data.code === 200) {
      customerDetail.value = resp.data.data
    } /*else {
      showMessage('查询详情数据失败', resp.data.msg, 'error')
    }*/
  }).catch()
}
/*-------------------备注相关----------------------*/
//显示备注对话框
// const dialogTableVisible = ref(false)
//表格数据
// const gridData = ref({})
// 获取表格数据
/*const remark = (id) => {
  loadGridData(id)
}*/
/*const loadGridData = (clueId) => {
  //发送请求，获取表格数据
  doGet('/api/customer/remarkList/' + clueId, {}).then(resp => {
    dialogTableVisible.value = true
    if (resp.data.code === 200) {
      gridData.value = resp.data.data
      console.log(gridData.value)
    } else {
      showMessage('查询活动备注失败', resp.data.msg, 'error')
    }
  })
}*/
/*const deleteNote = (id) => {
  ElMessageBox.confirm('确认删除该备注吗？').then(() => {
    // 发送请求，删除备注
    doDelete('/api/customer/deleteRemark/' + id, {}).then(resp => {
      // 判断是否删除成功
      if (resp.data.code === 200) {
        // 提示
        showMessage('删除备注成功', 'success')
        // 刷新表格数据
        refresh()
      } else {
        showMessage('删除活动备注失败', 'error', resp.data.msg)
      }
    })
  }).catch()
}*/
/*-----------------*/
//添加备注弹窗
// const tianJiaBeiZhu = ref(false)
//新增备注对象
// const addNoted = ref({})
//添加备注
/*const addNote = () => {
  // 打开添加备注弹窗
  tianJiaBeiZhu.value = true
}*/
//点击添加发送请求
/*
const addButton = () => {
  let beiZhuData = {
    clueId: route.params.id,
    noteContent: addNoted.value.noteContent,
    noteWay:addNoted.value.noteWay
  }
  // 发送请求，添加活动备注
  doPost('/api/customer/addRemark', beiZhuData).then(resp => {
    if (resp.data.code === 200) {
      // 提示
      showMessage('添加备注成功', 'success')
      // 刷新表格数据
      refresh()
      // 清空备注内容
      addNoted.value.noteContent = ''
      // 关闭弹窗
      tianJiaBeiZhu.value = false
    } else {
      showMessage('添加活动备注失败', 'error', resp.data.msg)
    }
  })
}
*/

/*-------------------备注相关----------------------*/
//跳转
/*const editButton = (id) => {
  //跳转到详情页面
  router.push('/index/customer/edit/' + id)
}*/
const noteWayList = ref([])
//获取字典值列表
const loadDicValueList = (typeCode) => {
  doGet('/api/dic/value/list/' + typeCode, {}).then(resp => {
    if (resp.data.code === 200) {
      if (typeCode === 'noteWay') {
        noteWayList.value = resp.data.data
      }
    } else {
      showMessage('查询字典值列表失败', resp.data.msg, 'error')
    }
  })
}
const productList = ref([])
// 查询所有产品列表
const loadProductList = () => {
  doGet('/api/product/list', {}).then(resp => {
    if (resp.data.code === 200) {
      productList.value = resp.data.data;
    } else {
      showMessage('查询产品列表失败，原因：' + resp.data.msg, 'error')
    }
  })
}
//转换客户表单验证规则.
const FormRules = {
  stage: [
    {required: true, message: '请选择阶段', trigger: 'blur'}
  ],
  money: [
    {required: true, message: '请输入金额', trigger: 'blur'},
      {min: 0, message: '金额必须大于0', trigger: 'blur'},
      {max: 9999999, message: '9999999', trigger: 'blur'}
  ],
  nextContactTime: [
    {required: true, message: '请输入下次联系时间', trigger: 'blur'}
  ],
  expectedDate: [
    {required: true, message: '请输入成交时间', trigger: 'blur'}
  ],
  description: [
    {required: true, message: '请输入描述', trigger: 'blur'}
  ]
}
//转换客户表单验证提交表单
const customerForm = ref()
//转换客户的弹出框
const zhuanhuankehu = ref(false)
//转换客户弹窗打开
const  switchClue= () => {
  zhuanhuankehu.value = true
}
//转换客户对象
const changeCustomer=ref({})
// 从路由参数中获取线索标识
const customerId = route.params.id
//转换客户
const customerButton=(formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      // 准备转换客户的参数
      let params = {
        customerId: customerId,
        description: changeCustomer.value.description,
        nextContactTime: changeCustomer.value.nextContactTime,
        money: changeCustomer.value.money,
        stage: changeCustomer.value.stage,
        expectedDate: changeCustomer.value.expectedDate
      }

      //发送请求，转换客户
      ElMessageBox.confirm('确认客户交易吗？').then(() => {
        console.log(params)
        // 发送请求，转换客户
        doPost('/api/tran/switchTran' , params).then(resp => {
          // 判断是否转换成功
          if (resp.data.code === 200) {
            // 提示
            showMessage('客户交易成功', 'success')
            // 关闭弹窗
            zhuanhuankehu.value = false
            // 跳转到客户页面
            router.push('/index/tran')
          } else {
            showMessage('客户交易失败', 'error', resp.data.msg)
          }
        })
      })
    }
  })
}

const stageList = ref([])
//获取字典值列表
const loadDicValueStageList = (typeCode) => {
  doGet('/api/dic/value/list/' + typeCode, {}).then(resp => {
    if (resp.data.code === 200) {
      if (typeCode === 'stage') {
        stageList.value = resp.data.data
      }
    } else {
      showMessage('查询字典值列表失败', resp.data.msg, 'error')
    }
  })
}

onMounted(() => {
  loadClueDetail()
  //跟踪方式列表
  loadDicValueList('noteWay')
  loadProductList('product')
  loadDicValueStageList('stage')
})

</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      class="warn-dialog"
      width="1000"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :align-center="true"
      :center="true"
      :overflow="true"
      :show-close="false"
      :title="'用户详情('+customerDetail.id+')'">
    <el-descriptions
        :model="customerDetail"
        class="margin-top"
        :column="3"
        border>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user/>
            </el-icon>
            负责人
          </div>
        </template>
        {{ customerDetail.ownerName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Promotion/>
            </el-icon>
            活动名称
          </div>
        </template>
        {{ customerDetail.activityName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Avatar/>
            </el-icon>
            用户姓名
          </div>
        </template>
        {{ customerDetail.fullName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <PieChart/>
            </el-icon>
            年龄
          </div>
        </template>
        {{ customerDetail.age === null ? '暂无' : customerDetail.age }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Cherry/>
            </el-icon>
            用户称呼
          </div>
        </template>
        {{ customerDetail.appellationName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <GoodsFilled/>
            </el-icon>
            职业
          </div>
        </template>
        {{ customerDetail.job === null ? '暂无' : customerDetail.job }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Iphone/>
            </el-icon>
            电话
          </div>
        </template>
        {{ customerDetail.phone === null ? '暂无' : customerDetail.phone }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <ChatRound/>
            </el-icon>
            微信号
          </div>
        </template>
        {{ customerDetail.weixin === null ? '暂无' : customerDetail.weixin }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Search/>
            </el-icon>
            QQ号
          </div>
        </template>
        {{ customerDetail.qq === null ? '暂无' : customerDetail.qq }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Message/>
            </el-icon>
            邮箱
          </div>
        </template>
        {{ customerDetail.email == null ? '暂无' : customerDetail.email }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Place/>
            </el-icon>
            地址
          </div>
        </template>
        {{ customerDetail.address === null ? '暂无' : customerDetail.address }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Wallet/>
            </el-icon>
            年收入
          </div>
        </template>
        {{ customerDetail.yearIncome === null ? '暂无' : customerDetail.yearIncome }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <WalletFilled/>
            </el-icon>
            是否贷款
          </div>
        </template>
        {{ customerDetail.needLoanName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Star/>
            </el-icon>
            意向状态
          </div>
        </template>
        {{ customerDetail.intentionStateName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <ShoppingCartFull/>
            </el-icon>
            意向产品
          </div>
        </template>
        {{ customerDetail.productName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Loading/>
            </el-icon>
            线索状态
          </div>
        </template>

        <span v-if="customerDetail.intentionStateName === '已转客户'" class="trueColor">
          {{ customerDetail.intentionStateName }}
        </span>
        <span v-else class="falseColor">
          {{ customerDetail.intentionStateName }}
        </span>
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Coordinate/>
            </el-icon>
            线索来源
          </div>
        </template>
        {{ customerDetail.sourceTypeName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Calendar/>
            </el-icon>
            下次联系时间
          </div>
        </template>
        {{ customerDetail.nextContactTime === null ? '暂无' : customerDetail.nextContactTime }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <EditPen/>
            </el-icon>
            创建人
          </div>
        </template>
        {{ customerDetail.createByName == null ? '暂无' : customerDetail.createByName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Edit/>
            </el-icon>
            编辑人
          </div>
        </template>
        {{ customerDetail.editByName == null ? '暂无' : customerDetail.editByName }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Timer/>
            </el-icon>
            创建时间
          </div>
        </template>
        {{ customerDetail.createTime == null ? '暂无' : customerDetail.createTime }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Stopwatch/>
            </el-icon>
            编辑时间
          </div>
        </template>
        {{ customerDetail.editTime === null ? '暂无' : customerDetail.editTime }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>
          <el-icon>
            <ChatLineSquare/>
          </el-icon>
          线索描述
          <el-tooltip
              class="box-item"
              effect="light"
              content="请点击查看备注"
              placement="right">
            <el-icon>
              <InfoFilled @click="remark(customerDetail.id)"/>
            </el-icon>
          </el-tooltip>
        </template>
        {{ customerDetail.description }}
      </el-descriptions-item>

    </el-descriptions>

    <div class="topUp" style="margin-left: 800px">
      <el-button type="success" @click="switchClue(customerDetail.id)">客户交易</el-button>
<!--      <el-button type="success" @click="addNote">添加备注</el-button>
      <el-button type="primary" @click="editButton(customerDetail.id)">编辑线索</el-button>-->
      <el-button type="info" @click="router.back()">返回</el-button>
    </div>

  </el-dialog>
  <!-- 活动备注弹窗 -->
<!--  <el-dialog v-model="dialogTableVisible" center title="线索备注" width="800">
    <el-table :border="true" :data="gridData">
      <el-table-column property="fullName" width="100" label="用户姓名" align="center"/>
      <el-table-column property="createByName" width="100" label="跟踪人" align="center"/>
      <el-table-column property="noteWayName" label="跟踪方式" align="center"/>
      <el-table-column property="noteContent" label="跟踪内容" align="center"/>
      <el-table-column property="createTime" label="创建时间" align="center"/>
      <el-table-column label="备注操作" align="center">
        <template #default="scope">
          <el-button size="small" type="danger" @click="deleteNote(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>-->
  <!--添加备注弹框-->
<!--  <el-dialog v-model="tianJiaBeiZhu" center title="添加备注" width="30%">
    <el-form :model="addNoted" style="margin-left: 3px;margin-top: 1px">
      <el-select v-model="addNoted.noteWay" placeholder="请选择线索状态" @click="loadDicValueList('noteWay')">
        <el-option
            v-for="item in noteWayList"
            :key="item.id"
            :label="item.typeValue"
            :value="item.id"/>
      </el-select>

      <el-input type="textarea" style="width: 100%; min-height: 50px; max-height: 200px;margin-top: 10px; resize: vertical;"
                :rows="3"
                show-word-limit
                maxlength="255"
                v-model="addNoted.noteContent">
      </el-input>
      <el-button type="primary" style="margin-left: 480px;margin-top: 5px" @click="addButton(clueDetail.id)">
        添加
      </el-button>
    </el-form>
  </el-dialog>-->

  <!--转换客户弹框-->
  <el-dialog v-model="zhuanhuankehu" center title="客户交易" width="30%">
    <el-form ref="customerForm" :model="changeCustomer" :rules="FormRules" style="margin-left: 5px;margin-top: 1px">

      <el-form-item label="交易金额: " style="margin-left: 40px" prop="money">
        <el-input v-model="changeCustomer.money" />
      </el-form-item>

      <el-form-item label="成交日期:" style="margin-left: 40px" prop="expectedDate" >
        <el-date-picker
            v-model="changeCustomer.expectedDate"
            type="datetime"
            style="width: 430px;"
            placeholder="请填写成交日期"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"/>
      </el-form-item>

      <el-form-item label="交易所处阶段: " style="margin-left: 10px" prop="stage">
        <el-select v-model="changeCustomer.stage" placeholder="请选择交易阶段">
          <el-option v-for="item in stageList"
                     :key="item.id"
                     :label="item.typeValue"
                     :value="item.id"/>
        </el-select>
      </el-form-item>

      <el-form-item label="下次联系时间:" style="margin-left: 10px" prop="nextContactTime">
        <el-date-picker
            v-model="changeCustomer.nextContactTime"
            type="datetime"
            style="width: 430px;"
            placeholder="请填写下次联系时间"
            format="YYYY-MM-DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"/>
      </el-form-item>

      <el-form-item label="交易描述: "  style="margin-left: 40px" prop="description">
        <el-input type="textarea" v-model="changeCustomer.description" :rows="3" :maxlength="255" show-word-limit/>
      </el-form-item>

      <el-button type="primary" style="margin-left: 480px;margin-top: 5px" @click="customerButton(customerForm)">
        交易
      </el-button>
    </el-form>
  </el-dialog>


</template>

<style scoped>
.el-form {
  margin-top: 20px;
  margin-left: 80px;
}

.el-form-item {
  margin-left: 60px;
}

.el-dialog__body {
  height: 70vh;
  overflow: auto;
}

.topUp {
  margin-top: 10px;
}

.trueColor {
  color: limegreen;
}

.el-col {
  margin-top: 20px;
  margin-left: 50px;
}
</style>